import { Button, Space, Tag } from 'antd';
import { Table } from 'antd';
import { Icon } from '@iconify/react';
import MenuDialog from './Dialog';
import { getMenuList } from '@/api/login';
interface MenuItem {
  label: string;
  key: string;
  type: string;
  status: string;
  icon?: string;
  children?: MenuItem[];
}

function Menu() {
  const [dialog, setDialog] = useState({
    title: '类型',
    dataIndex: 'type',
    key: 'type',
    render: (_: unknown, record: MenuItem) => {
      return (
        <>
          {record.type === '1' && <Tag color="success">目录</Tag>}
          {record.type === '2' && <Tag color="warning">菜单</Tag>}
          {record.type === '3' && <Tag color="error">按钮</Tag>}
        </>
      );
    },
  });
  const [dataSource, setDataSource] = useState([]);
  const columns = [
    {
      title: '名称',
      dataIndex: 'label',
      key: 'label',
      align: 'center' as const,
    },
    { title: '路径', dataIndex: 'key', key: 'key', align: 'center' as const },
    {
      title: '类型',
      dataIndex: 'type',
      key: 'type',
      render: (_: unknown, record: unknown) => {
        return (
          <>
            {record.type === '1' && <Tag color="success">目录</Tag>}
            {record.type === '2' && <Tag color="warning">菜单</Tag>}
            {record.type === '3' && <Tag color="error">按钮</Tag>}
          </>
        );
      },
      align: 'center' as const,
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (_: unknown, record: MenuItem) => {
        return (
          <>
            {record.status === '1' && <Tag color="success">启用</Tag>}
            {record.status === '0' && <Tag color="error">禁用</Tag>}
          </>
        );
      },
      align: 'center' as const,
    },
    {
      title: '图标',
      dataIndex: 'icon',
      key: 'icon',
      render: (_: unknown, record: MenuItem) => {
        return (
          <>
            {record.icon && <Icon icon={record.icon} width="20" height="20" />}
          </>
        );
      },
      align: 'center' as const,
    },
    {
      title: '操作',
      dataIndex: 'opeart',
      key: 'icon',
      render: (_: unknown, record: MenuItem) => {
        return (
          <>
            <Space>
              {record.type !== '3' && (
                <Button type="primary" onClick={() => {}}>
                  新增
                </Button>
              )}
              <Button color="purple" onClick={() => {}}>
                编辑
              </Button>
              <Button type="primary" danger onClick={() => {}}>
                删除
              </Button>
            </Space>
          </>
        );
      },
      align: 'center' as const,
    },
  ];
  const getList = useCallback(async () => {
    const result = await getMenuList();
    if (!result) return;
    const { data } = result;
    console.log(data, 'data');
    setDataSource(data.list);
    console.log(result, 'result');
  }, []);
  useEffect(() => {
    getList();
  }, [getList]);

  const handleAdd = () => {
    console.log('新增');
    setDialog({
      visible: true,
      title: '新增菜单',
      record: null,
    });
  };

  const onCancel = () => {
    setDialog({
      visible: false,
      title: '',
      record: null,
    });
  };
  return (
    <>
      <div>
        <Button type="primary" onClick={() => handleAdd()}>
          新增
        </Button>
      </div>
      <Table
        columns={columns}
        dataSource={dataSource}
        pagination={false}
        rowKey="key"
      />
      <MenuDialog
        visible={false}
        record={null}
        {...dialog}
        treeSource={dataSource}
        onCancel={onCancel}
        onSuccess={getList}
      />
    </>
  );
}

export default Menu;
